<template>
  <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
    <n-grid-item span="0:24 640:24 1024:8">
      <n-card title="通知成功情况" :bordered="false" class="h-full rounded-8px shadow-sm">
        <div class="tip overflow-hidden">
          <span class="text-#f43648 font-light">*语音通知0.06元/条,*短信通知0.039元/条</span>
        </div>
        <div class="notice">
          <div v-for="item in noticeData" :key="item.name">
            <span>{{ item.name }}</span>
            <p id="voiceCount">{{ `${item.count}条` }}</p>
            <p id="voiceSpend">{{ `${item.spend}元` }}</p>
          </div>
        </div>
        <n-date-picker v-model="chooseTime" class="pt-32px" type="datetimerange" :shortcuts="pickerOptions" />
      </n-card>
    </n-grid-item>
    <n-grid-item span="0:24 640:24 1024:16">
      <n-card title="接单产品" :bordered="false" class="h-full rounded-8px shadow-sm">
        <n-image lazy width="100" src="https://d.jndx.net/chsjs/static/skins/default/imgs/jiedan.png" />
        <p class="text-#aaa">名片</p>
      </n-card>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="ts">
import { h, ref } from 'vue';
import { NTag } from 'naive-ui';

defineOptions({ name: 'DashboardAnalysisBottomPart' });

const chooseTime = ref('');

const pickerOptions = {
  本周: () => {
    // 获取今天
    const end = new Date();
    // 获取当前周的第一天
    const start = new Date(end.getFullYear(), end.getMonth(), end.getDate() - ((end.getDay() + 6) % 7));
    start.setTime(start.getTime());
    return [start, end];
  },
  本月: () => {
    const end = new Date();
    // 获取当前月的第一天
    const start = new Date(end.getFullYear(), end.getMonth(), 1);
    start.setTime(start.getTime());
    return [start, end];
  },
  上个月: () => {
    const oDate = new Date();
    let year = oDate.getFullYear();
    const month = oDate.getMonth();
    let end;
    let start;
    if (month == 0) {
      year--;
      start = new Date(year, 11, 1);
      end = new Date(year, 11, 31);
    } else {
      start = new Date(year, month - 1, 1);
      end = new Date(year, month, 0);
    }
    return [start, end];
  },
  近2小时: () => {
    const cur = new Date().getTime();
    return [cur - 2 * 60 * 60 * 1000, cur] as const;
  }
};

const noticeData = [
  {
    name: '语音',
    count: 0,
    spend: 0.0
  },
  {
    name: '短信',
    count: 0,
    spend: 0.0
  }
];

interface TableData {
  key: number;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const columns = [
  {
    title: 'Name',
    key: 'name'
  },
  {
    title: 'Age',
    key: 'age'
  },
  {
    title: 'Address',
    key: 'address'
  },
  {
    title: 'Tags',
    key: 'tags',
    render(row: TableData) {
      const tags = row.tags.map(tagKey => {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px'
            },
            type: 'info'
          },
          {
            default: () => tagKey
          }
        );
      });
      return tags;
    }
  }
];

const tableData: TableData[] = [
  {
    key: 0,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: 1,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['wow']
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  },
  {
    key: 3,
    name: 'Soybean',
    age: 25,
    address: 'China Shenzhen',
    tags: ['handsome', 'programmer']
  },
  {
    key: 4,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: 5,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['wow']
  },
  {
    key: 6,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
];
</script>

<style scoped>
.notice {
  overflow: hidden;
  margin-top: -12px;
  margin-left: 90px;
}
.notice div {
  width: 38%;
  float: left;
  text-align: center;
  margin-top: 50px;
}
.notice span {
  color: #333;
  font-size: 20px;
}
.notice p {
  font-size: 16px;
  margin-top: 20px;
  color: #333;
}
</style>
